/**
 * 主页包含3个底部tab选项卡：首页、海淘、小时风云榜
 * Created by 10691 on 17/5/4.
 */
import React from 'react';
import {Image, StyleSheet, Platform} from 'react-native';
import {TabNavigator, StackNavigator} from 'react-navigation';

import LaunchPage from './LaunchPage.js';
import Home from '../home/Home.js';
import HaiTao from '../haitao/HaiTao.js';
import HourList from '../hourList/HourList.js';
import {HeaderLeftHot, HeaderTitle, HeaderRightSearch, HeaderRightText} from '../communals/Header.js';
import HalfHourHot from '../home/HalfHourHot.js';
import HaiTaoHalfHourHot from '../haitao/HaiTaoHalfHourHot.js';
import CommunalDetail from '../communals/GoodsDetails';
import Settings from '../hourList/Settings.js';
import Search from '../communals/Search.js';

/**
 * 3个底部tab选项卡以及各种Navigation的配置
 */
export const MainTab = TabNavigator({
    // 首页
    Home: {
        screen: Home,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '首页',
            headerLeft: (<HeaderLeftHot onPress={() => navigation.navigate('HalfHourHot')}/>),
            headerRight: (<HeaderRightSearch onPress={() => navigation.navigate('Search')}/>),
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={{uri: 'tab_bar_home_30x30'}}
                    style={[mainStyles.tabBarIconStyle, {tintColor: tintColor}]}
                />),
        })
    },

    // 海淘
    HaiTao: {
        screen: HaiTao,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '海淘',
            headerLeft: (<HeaderLeftHot onPress={() => navigation.navigate('HaiTaoHalfHourHot')}/>),
            headerRight: (<HeaderRightSearch onPress={() => navigation.navigate('Search')}/>),
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={{uri: 'tab_bar_hai_tao_30x30'}}
                    style={[mainStyles.tabBarIconStyle, {tintColor: tintColor}]}
                />),
        })
    },

    // 小时风云榜
    HourList: {
        screen: HourList,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '小时风云榜',
            headerTitle: (<HeaderTitle title="小时风云榜" titleStyle={{marginLeft: 15}}/>),
            headerRight: (<HeaderRightText title="设置" onPress={() => navigation.navigate('Settings')}/>),
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={{uri: 'tab_bar_hour_list_30x30'}}
                    style={[mainStyles.tabBarIconStyle, {tintColor: tintColor}]}
                />),
        })
    },
}, {
    tabBarPosition: 'bottom',              // 选项卡位置在底部
    swipeEnabled: false,                  // 禁止滑动切换
    lazy: true,                          // 是否懒加载
    animationEnabled: false,             // 设置无切换动画
    backBehavior: 'none',               // 按返回键是否切换到第一个选项卡，none为不切换
    tabBarOptions: {
        activeTintColor: 'red',       // 选项卡选中状态时图片和文字的颜色
        inactiveTintColor: 'gray',      // 选项卡非选中状态时图片和文字的颜色
        showIcon: true,                  // 是否显示图标
        indicatorStyle: {
            height: 0,                    // 去掉指示器
        },
        style: {
            backgroundColor: 'white',
            height: 45,
        },
        labelStyle: {
            marginTop: 2,
            fontSize: 10,
        },
        iconStyle: {
            marginTop: -5,
        }
    }
});

const mainStyles = StyleSheet.create({
    tabBarIconStyle: {
        width: 22,
        height: 22,
    },
});

/**
 * StackNavigator路由表配置,包括各页面的
 */
export const App = StackNavigator({
        // 启动页
        LaunchPage: {
            screen: LaunchPage,
            navigationOptions: {
                // 设置启动页高度为0即无标题
                headerStyle: {height: 0}
            },
        },

        // 包含3个Tab的主页面
        MainTab: {
            screen: MainTab,
        },

        // 半小时热门
        HalfHourHot: {
            screen: HalfHourHot,
            navigationOptions: ({navigation}) => ({
                // 去掉默认的返回键
                headerLeft: null,
                headerTitle: (<HeaderTitle title='近半小时热门' titleStyle={{marginLeft: 15}}/>),
                // 设置关闭键取代返回键
                headerRight: ( <HeaderRightText title='关闭' onPress={() => navigation.goBack()}/>),
                gesturesEnabled: true,
            }),
        },

        // 海淘半小时热门
        HaiTaoHalfHourHot: {
            screen: HaiTaoHalfHourHot,
            navigationOptions: ({navigation}) => ({
                // 去掉默认的返回键
                headerLeft: null,
                headerTitle: (<HeaderTitle title='海淘半小时热门' titleStyle={{marginLeft: 15}}/>),
                // 设置关闭键取代返回键
                headerRight: ( <HeaderRightText title='关闭' onPress={() => navigation.goBack()}/>),
                gesturesEnabled: true,
            }),
        },

        // 商品详情页面
        CommunalDetail: {
            screen: CommunalDetail,
            navigationOptions: {
                gesturesEnabled: true,
                headerTitle: (<HeaderTitle title="商品详情" titleStyle={{marginRight: Platform.OS === 'ios' ? 0 : 50}}/>)
            }
        },

        // 设置界面
        Settings: {
            screen: Settings,
            navigationOptions: {
                gesturesEnabled: true,
                headerTitle: (<HeaderTitle title="设置" titleStyle={{marginRight: Platform.OS === 'ios' ? 0 : 50}}/>)
            }
        },

        // 搜索页面
        Search: {
            screen: Search,
            navigationOptions: {
                gesturesEnabled: true,
                headerTitle: (<HeaderTitle title="搜索全网折扣" titleStyle={{marginRight: Platform.OS === 'ios' ? 0 : 50}}/>)
            }
        }
    },
    {
        // 配置首次启动的页面为启动页
        initialRouteName: 'LaunchPage',
        mode: 'card',
        // StackNavigator的通用配置
        navigationOptions: {
            headerStyle: {
                height: Platform.OS === 'ios' ? 60 : 45,
            },
            headerBackTitle: '返回'
        }
    }
);